<template>
  <scroll-view scroll-y style="height: 400px">
    <view v-for="(item, inx) in data" class="info-group">
      <view class="left" :style="inx == data.length - 1 ? 'border-bottom: 1px #efefef solid' : ''">
        <view class="l-line" style="height: 6px"></view>
        <view class="l-icon"
          ><u-icon :color="icons[item.State]['color']" :name="icons[item.State]['icon']"></u-icon
        ></view>
        <view class="l-text">{{ item.StateText }}</view>
        <view class="l-line" style="flex: 1"></view>
      </view>
      <view class="right">
        <view class="title">
          <view class="work">{{ item.Work.WorkName }} </view>
          <view class="employ">({{ item.Work.EmployName }}) </view>
          <view style="flex: 1" />
          <view class="time">{{ item.CreateTime }}</view>
        </view>
        <view class="title">
          <view style="flex: 1" />
          <u-button
            :hairline="true"
            :plain="true"
            :customStyle="cbStyle"
            icon="order"
            size="mini"
            text="查看详情"
          ></u-button
        ></view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    data: {
      type: Array,
      default: [],
    },
  },
  name: 'seekList',
  data() {
    return {
      cbStyle: {
        width: '70px',
      },
      icons: {
        submit: { icon: 'bell', color: '#398ade' }, //申请职位
        check: { icon: 'server-man', color: '#f9ae3d' }, //平台已确认
        success: { icon: 'checkmark-circle', color: '#53c21d' }, //录用
        fail: { icon: 'close-circle', color: '#f56c6c' }, //拒绝
      },
      cbStyle: {
        width: '72px',
        'margin-left': '8px',
      },
    }
  },
  watch: {},
  computed: {},
  created() {},
  methods: {},
}
</script>
<style lang="scss" scoped>
.info-group {
  position: relative;
  width: 100%;
  height: 60px;
  display: flex;

  .left {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    // background: rgb(236, 202, 178);
    width: 58px;
    height: 100%;
    .l-line {
      width: 2px;
      background: rgb(228, 231, 237);
    }

    .l-text {
      font-size: 18upx;
    }
  }
  .right {
    box-sizing: border-box;
    border-bottom: 1px #efefef solid;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 28upx;
    .title {
      width: 100%;
      display: flex;
      color: #555;
      margin-bottom: 8px;
      .work {
        font-weight: bold;
      }
      .employ {
        display: flex;
      }
      .time {
        font-size: 24upx;
        color: #bbb;
        display: flex;
      }
    }
  }
}
</style>
